<template>
  <div class="login-page">
    <div class="login-form">
      <img
        class="login-logo"
        src="http://likede2-admin.itheima.net/img/logo.595745bd.png"
        alt=""
      />
      <el-form :model="form" :rules="rules" ref="fff">
        <!-- 用户名框 -->
        <el-form-item prop="loginName">
          <el-input
            prefix-icon="el-icon-mobile-phone"
            placeholder="请输入用户名"
            v-model="form.loginName"
          ></el-input>
        </el-form-item>
        <!-- 密码框 -->
        <el-form-item prop="password" class="abc">
          <el-input
            prefix-icon="el-icon-lock"
            placeholder="请输入密码"
            v-model="form.password"
            :type="pwdType"
          ></el-input>
          <img :src="seen ? openeye : offeye" @click="changeye()" class="eye" />
        </el-form-item>
        <!-- 验证码框 -->
        <el-form-item class="aaa" prop="code">
          <el-input
            maxlength="4"
            v-model="form.code"
            prefix-icon="el-icon-loading"
            placeholder="请输入验证码"
          ></el-input>
          <img :src="pictures" @click="fn" alt="" />
        </el-form-item>
        <!-- 登录 -->
        <el-form-item class="tc">
          <el-button type="primary" round @click="login">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { login, picture } from "@/api/user";
import { Message } from "element-ui";
export default {
  name: "login-page",
  data() {
    return {
      seen: "",
      pwdType: "password",
      openeye:
        "https://img2.baidu.com/it/u=2185189038,1463538309&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
      offeye:
        "https://img2.baidu.com/it/u=1220446905,1185946036&fm=253&fmt=auto&app=138&f=JPEG?w=44&h=36",
      form: {
        loginName: "admin",
        password: "admin",
        code: "",
        loginType: 0,
        clientToken: ":clientToken",
        account: "",
        mobile: "",
      },
      rules: {
        loginName: [
          {
            required: true,
            message: "请输入用户名",
            trigger: ["change", "blur"],
          },
          {
            min: 5,
            max: 11,
            message: "长度在 5 到 11 个字符",
            trigger: ["blur", "change"],
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: ["change", "blur"],
          },
          {
            pattern: /^\w{5,11}$/,
            message: "请输入 5 到 10 位的密码",
            trigger: ["blur", "change"],
          },
        ],
        code: [
          {
            required: true,
            message: "请输入验证码",
            trigger: ["change", "blur"],
          },
        ],
      },
      pictures: "",
    };
  },
  //提前请求图片
  async created() {
    const res = await picture();
    console.log(res);
    this.pictures = `data:image/png;base64,${btoa(
      new Uint8Array(res).reduce(
        (data, byte) => data + String.fromCharCode(byte),
        ""
      )
    )}`;
  },
  methods: {
    //验证码图片
    async fn() {
      const res = await picture();
      this.pictures = `data:image/png;base64,${btoa(
        new Uint8Array(res).reduce(
          (data, byte) => data + String.fromCharCode(byte),
          ""
        )
      )}`;
      console.log(this.pictures);
    },
    //改变密码框
    changeye() {
      this.pwdType = this.pwdType === "password" ? "text" : "password";
      this.seen = !this.seen;
    },
    //点击登录跳转首页
    async login() {
      try {
        const valid = await this.$refs.fff.validate();
        console.log(valid);
        if (valid) {
          const res = await login(this.form);
          console.log(res);
          if (!res.userId) {
            Message(res.msg);
          } else {
            Message(res.msg);
            this.$store.commit("user/setUserToken", res.token);
            this.$router.push("/");
          }
        }
        // console.log(res);
      } catch (e) {
        console.log(e);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-input__inner {
  height: 70px;
  width: 500px;
  font-size: 18px;
  color: #888888;
}

.login-page {
  position: relative;
  min-height: 100vh;
  background: url(@/assets/login-bg.png) no-repeat center / cover;
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: space-around;
  .login-form {
    position: absolute;
    width: 518px;
    height: 388px;
    top: 50%;
    left: 50%;
    margin-top: -194px;
    margin-left: -259px;
    padding: 76px 35px 0;
    background: #fff;
    -webkit-box-shadow: 0 3px 70px 0 rgba(30, 111, 72, 0.35);
    box-shadow: 0 3px 70px 0 rgba(30, 111, 72, 0.35);
    border-radius: 10px;
  }
  .login-logo {
    position: absolute;
    width: 96px;
    height: 96px;
    top: -46px;
    left: 50%;
    margin-left: -48px;
    border-radius: 100%;
    box-shadow: 0px 5px 10px #888888;
  }
  .el-form {
    padding: 0 10px;
  }
  .tc {
    text-align: center;
    .el-button {
      width: 488px;
      height: 70px;
      font-size: 30px;
    }
  }
  .abc {
    position: relative;
    .eye {
      width: 30px;
      height: 30px;
      position: absolute;
      left: 90%;
      top: 30%;
    }
  }
  .aaa {
    position: relative;
    ::v-deep .el-input__inner {
      height: 70px;
      width: 350px;
      font-size: 18px;
      color: #888888;
    }
    img {
      width: 150px;
      height: 70px;
      position: absolute;
      left: 70%;
      background-color: blue;
    }
  }
}
</style>
